<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Canvas 测试</title>
    <style>
        body {
            text-align: center;
        }

        canvas {
            background: #ddd;
        }
    </style>
</head>
<body>
<canvas id="c1" width="500" height="400"></canvas>
<script>
    let c1 = document.getElementById("c1");
    // 获取画笔
    let cas = c1.getContext("2d");
    // 2. 设置描边或者填充颜色
    // cas.strokeWidth = 1;
    // cas.strokeStyle = "red";
    // cat.strokeRect(0, 0, 100, 100);

    cas.fillStyle = "blue";
    // 绘制矩形
    cas.fillRect(0, 0, 100, 80);

    cas.strokeRect(400, 0, 100, 80);
    cas.strokeRect(0, 320, 100, 80);
    cas.fillRect(400, 320, 100, 80);
    cas.fillRect(200, 160, 100, 80);
</script>
</body>
</html>